{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from __future__ import print_function\n",
    "from bqplot import *\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "from ipywidgets import Layout, Dropdown, Button\n",
    "from ipywidgets import Image as ImageIpy"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Scatter Chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Scatter Chart Selections\n",
    "\n",
    "Click a point on the `Scatter` plot to select it. Now, run the cell below to check the selection. After you've done this, try holding the `ctrl` (or `command` key on Mac) and clicking another point. Clicking the background will reset the selection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "x_sc = LinearScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "x_data = np.arange(20)\n",
    "y_data = np.random.randn(20)\n",
    "\n",
    "scatter_chart = Scatter(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, colors=['dodgerblue'],\n",
    "                       interactions={'click': 'select'},\n",
    "                        selected_style={'opacity': 1.0, 'fill': 'DarkOrange', 'stroke': 'Red'},\n",
    "                       unselected_style={'opacity': 0.5})\n",
    "\n",
    "ax_x = Axis(scale=x_sc)\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "\n",
    "Figure(marks=[scatter_chart], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scatter_chart.selected"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternately, the `selected` attribute can be directly set on the Python side (try running the cell below):"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "scatter_chart.selected = [1, 2, 3]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Scatter Chart Interactions and Tooltips"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "x_sc = LinearScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "x_data = np.arange(20)\n",
    "y_data = np.random.randn(20)\n",
    "\n",
    "dd = Dropdown(options=['First', 'Second', 'Third', 'Fourth'])\n",
    "scatter_chart = Scatter(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, colors=['dodgerblue'],\n",
    "                       names=np.arange(100, 200), names_unique=False, display_names=False, display_legend=True,\n",
    "                       labels=['Blue'])\n",
    "ins = Button(icon='fa-legal')\n",
    "scatter_chart.tooltip = ins\n",
    "line = Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, colors=['dodgerblue'])\n",
    "scatter_chart2 = Scatter(x=x_data, y=np.random.randn(20), \n",
    "                         scales= {'x': x_sc, 'y': y_sc}, colors=['orangered'],\n",
    "                         tooltip=dd, names=np.arange(100, 200), names_unique=False, display_names=False, \n",
    "                         display_legend=True, labels=['Red'])\n",
    "\n",
    "ax_x = Axis(scale=x_sc)\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "\n",
    "fig = Figure(marks=[scatter_chart, scatter_chart2, line], axes=[ax_x, ax_y])\n",
    "fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def print_event(self, target):\n",
    "    print(target)\n",
    "\n",
    "# Adding call back to scatter events\n",
    "# print custom mssg on hover and background click of Blue Scatter\n",
    "scatter_chart.on_hover(print_event)\n",
    "scatter_chart.on_background_click(print_event)\n",
    "\n",
    "# print custom mssg on click of an element or legend of Red Scatter\n",
    "scatter_chart2.on_element_click(print_event)\n",
    "scatter_chart2.on_legend_click(print_event)\n",
    "line.on_element_click(print_event)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Changing interaction from hover to click for tooltip\n",
    "scatter_chart.interactions = {'click': 'tooltip'}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding figure as tooltip\n",
    "x_sc = LinearScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "x_data = np.arange(10)\n",
    "y_data = np.random.randn(10)\n",
    "\n",
    "lc = Lines(x=x_data, y=y_data, scales={'x': x_sc, 'y':y_sc})\n",
    "ax_x = Axis(scale=x_sc)\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "tooltip_fig = Figure(marks=[lc], axes=[ax_x, ax_y], layout=Layout(min_width='600px'))\n",
    "\n",
    "scatter_chart.tooltip = tooltip_fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Image\n",
    "\n",
    "For images, `on_element_click` returns the location of the mouse click. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "i = ImageIpy.from_file(os.path.abspath('../data_files/trees.jpg'))\n",
    "bqi = Image(image=i, scales={'x': x_sc, 'y': y_sc}, x=(0, 10), y=(-1, 1))\n",
    "\n",
    "fig_image = Figure(marks=[bqi], axes=[ax_x, ax_y])\n",
    "fig_image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "bqi.on_element_click(print_event)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding default tooltip to Line Chart\n",
    "x_sc = LinearScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "x_data = np.arange(100)\n",
    "y_data = np.random.randn(3, 100)\n",
    "\n",
    "def_tt = Tooltip(fields=['name', 'index'], formats=['', '.2f'], labels=['id', 'line_num'])\n",
    "line_chart = Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, \n",
    "                       tooltip=def_tt, display_legend=True, labels=[\"line 1\", \"line 2\", \"line 3\"] )\n",
    "\n",
    "ax_x = Axis(scale=x_sc)\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "\n",
    "Figure(marks=[line_chart], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding call back to print event when legend or the line is clicked\n",
    "line_chart.on_legend_click(print_event)\n",
    "line_chart.on_element_click(print_event)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding interaction to select bar on click for Bar Chart\n",
    "x_sc = OrdinalScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "x_data = np.arange(10)\n",
    "y_data = np.random.randn(2, 10)\n",
    "\n",
    "bar_chart = Bars(x=x_data, y=[y_data[0, :].tolist(), y_data[1, :].tolist()], scales= {'x': x_sc, 'y': y_sc},\n",
    "                 interactions={'click': 'select'},\n",
    "                 selected_style={'stroke': 'orange', 'fill': 'red'},\n",
    "                 labels=['Level 1', 'Level 2'],\n",
    "                 display_legend=True)\n",
    "ax_x = Axis(scale=x_sc)\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "\n",
    "Figure(marks=[bar_chart], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding a tooltip on hover in addition to select on click\n",
    "def_tt = Tooltip(fields=['x', 'y'], formats=['', '.2f'])\n",
    "bar_chart.tooltip=def_tt\n",
    "bar_chart.interactions = {\n",
    "    'legend_hover': 'highlight_axes',\n",
    "    'hover': 'tooltip', \n",
    "    'click': 'select',\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Changing tooltip to be on click\n",
    "bar_chart.interactions = {'click': 'tooltip'}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Call back on legend being clicked\n",
    "bar_chart.type='grouped'\n",
    "bar_chart.on_legend_click(print_event)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Histogram"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding tooltip for Histogram\n",
    "x_sc = LinearScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "sample_data = np.random.randn(100)\n",
    "\n",
    "def_tt = Tooltip(formats=['', '.2f'], fields=['count', 'midpoint'])\n",
    "hist = Hist(sample=sample_data, scales= {'sample': x_sc, 'count': y_sc},\n",
    "                       tooltip=def_tt, display_legend=True, labels=['Test Hist'], select_bars=True)\n",
    "ax_x = Axis(scale=x_sc, tick_format='0.2f')\n",
    "ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')\n",
    "\n",
    "Figure(marks=[hist], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Changing tooltip to be displayed on click\n",
    "hist.interactions = {'click': 'tooltip'}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Changing tooltip to be on click of legend\n",
    "hist.interactions = {'legend_click': 'tooltip'}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "## Pie Chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Set up a pie chart with click to show the tooltip."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pie_data = np.abs(np.random.randn(10))\n",
    "\n",
    "sc = ColorScale(scheme='Reds')\n",
    "tooltip_widget = Tooltip(fields=['size', 'index', 'color'], formats=['0.2f', '', '0.2f'])\n",
    "pie = Pie(sizes=pie_data, scales={'color': sc}, color=np.random.randn(10), \n",
    "          tooltip=tooltip_widget, interactions = {'click': 'tooltip'}, selected_style={'fill': 'red'})\n",
    "\n",
    "pie.selected_style = {\"opacity\": \"1\", \"stroke\": \"white\", \"stroke-width\": \"2\"}\n",
    "pie.unselected_style = {\"opacity\": \"0.2\"}\n",
    "\n",
    "Figure(marks=[pie])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Changing interaction to select on click and tooltip on hover\n",
    "pie.interactions = {'click': 'select', 'hover': 'tooltip'}"
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
